<template>
  <div class="app-container">
    <div>
      <el-row :gutter="10">
        <el-col :span="6" :xs="24" :lg="24">
          <div class="bgwhite plr20 ptb20 radius10 flex-col">
            <div class="justify-between w100p">
              <div class="clr3c4 bold ft26">編輯</div>
              <div class="clr9fa align-center pointer" @click="back()">
                <el-icon>
                  <Back />
                </el-icon>
                返回上一頁
              </div>
            </div>
            <div class="mt40">
              <el-form :label-position="labelPosition" label-width="auto" :model="formLabelAlign" style="max-width: 600px">
                <el-form-item label="ID:" required>
                  <el-input v-model="formLabelAlign.id" disabled style="width: 380px;" />
                </el-form-item>
                <el-form-item label="描述:" required>
                  <el-input v-model="formLabelAlign.desc" placeholder="请输入描述" />
                </el-form-item>
                <el-form-item label="消息内容:" required style="align-items: flex-start;" v-if="formLabelAlign.is_img == '0'">
                  <el-input v-model="formLabelAlign.value" type="textarea" placeholder="请输入消息内容" style="min-height:250px;" />
                </el-form-item>
                <el-form-item label="消息内容:" required style="align-items:flex-start;font-weight:bold;" v-if="formLabelAlign.is_img == '1'">
                  <el-upload v-model:file-list="fileList" :action="$upUrl" list-type="picture-card" :headers="headers" name="images" :on-success="onSuccess" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                    <div class="uploader flex-cen" v-if="fileList.length == 0">
                      <el-icon size="60" style="color: #3a3f63;">
                        <Picture />
                      </el-icon>
                    </div>
                    <el-button class="btn2 ml20">選擇文件</el-button>
                  </el-upload>
                </el-form-item>
              </el-form>
              <template v-if="formLabelAlign.is_img == '2'">
                <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
                <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
              </template>

              <div class="mt40 mb15 flex-cen ">
                <div class="align-center">
                  <el-button class="btn1" @click="reset()">重置</el-button>
                  <el-button class="btn2" @click="submit()">提交</el-button>
                </div>

              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>


<script setup lang="ts">
// import ArticleDetail from './components/ArticleDetail.vue';
import { reactive, ref, onBeforeUnmount, shallowRef, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import type { FormProps } from 'element-plus'
import { settingEdit } from '@/api/system.js'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { baseURL, headers, } from '@/utils/utils'
import '@wangeditor/editor/dist/css/style.css'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()

const labelPosition = ref<FormProps['labelPosition']>('right')
const fileList = ref([])
const onSuccess = (res) => {
  console.log('上传成功', res)
  let path = res.data[0].path
  let fullpath = `${baseURL}${path}`
  let file = [
    {
      name: 'params',
      url: fullpath
    }
  ]
  fileList.value = file

}
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  fileList.value = []
}
const mode = ref('')
const editorRef = shallowRef()
const valueHtml = ref('<p>hello</p>')
const route = useRoute()
onMounted(() => {
  console.log(route.query)
  formLabelAlign.id = `${route.query.id}`
  formLabelAlign.is_img = `${route.query.is_img}`
  formLabelAlign.desc = `${route.query.desc}`
  formLabelAlign.value = `${route.query.value}`
  let file = [
    {
      name: 'params',
      url: `${route.query.value}`
    }
  ]
  fileList.value = file

  valueHtml.value = `${route.query.value}`
})
const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...', MENU_CONF: {} }
editorConfig.MENU_CONF['uploadImage'] = {
  server: 'https://beta.paiduoduo.app/admin/v1/uploadImg',
  fieldName: 'images',
  headers: {
    Authorization: userStore.token
  },
  onSuccess(file, res) {          // JS 语法
    console.log(`${file.name} 上传成功`, res)
  },
}


// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

const formLabelAlign = reactive({
  id: '',
  is_img: '',
  value: '',
  desc: ''
})
const submit = () => {
  /* console.log(editorRef.value.getMenuConfig('uploadImage'))
  return */
  let value = ''
  if (formLabelAlign.is_img == '0') {
    value = formLabelAlign.value
  }
  if (formLabelAlign.is_img == '1') {
    value = fileList.value.length ? fileList.value[0].url : ''
  }
  if (formLabelAlign.is_img == '2') {
    // console.log('富文本', valueHtml.value)
    value = valueHtml.value
  }
  settingEdit({
    id: formLabelAlign.id,
    value: value,
    desc: formLabelAlign.desc
  }).then((res) => {
    console.log('提交系统参数===', res)
    back()
  })
}
const reset = () => {
  formLabelAlign.value = ''
  formLabelAlign.desc = ''
}
const router = useRouter()
const back = () => {
  router.back()
}
</script>

<style scoped >
:deep(.el-upload--picture-card) {
  background-color: transparent;
  border: none;
  width: auto;
}

:deep(.el-input) {
  box-shadow: none;
}

:deep(.el-textarea__inner) {
  min-height: 250px !important;
}

:deep(.el-textarea) {
  --el-input-hover-border-color: #ecf0f5 !important;
  --el-input-focus-border-color: #ecf0f5 !important;
  --el-input-border-color: #ecf0f5 !important;
}
</style>